<template>
    <div>
        <span>关键字</span>
        <input type="text" v-model="quertInfo.WiteTitle"/>
        <span>公告类型</span>
        <select v-model="quertInfo.WiteType">
            <option value="">请选择</option>
            <option :value="1">服务协议</option>
            <option :value="2">水电协议</option>
            <option :value="3">安全协议</option>
        </select>
        <input type="button" value="查询" @click="getWilelist" class="btn btn-warning ">
        <input type="button" value="导出" @click="WileExport" class="btn btn-info ">
        <br/>
        <input type="button" value="添加" @click="ok" class="btn btn-success" />
        <input type="button" value="批量删除" @click="willAllDelete" class="btn btn-danger" />

        <input type="button" value="批量显示" @click="willAllUpt(1)" class="btn btn-info" />
        <input type="button" value="批量隐藏" @click="willAllUpt(0)" class="btn btn-info" />


        <h2>会告显示列表</h2>
        <table class="table table-bordered table-striped">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="gocheckAll"/></td>
                    <td>Id</td>
                    <td>会告标题</td>
                    <td>会告内容</td>
                    <td>门店图片</td>
                    <td>会告状态</td>
                    <td>会告类型</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td><input type="checkbox" v-model="ids" @change="checkone" :value="item.id"/></td>
                    <td>{{item. id}}</td>
                    <td>{{item.witeTitle}}</td>
                    <td>{{item. witeDesc}}</td>
                    <td>
                        <img :src="item. photo" alt="" style="width:100px;height:100px">
                    </td>
                    <td>{{item. state==1?'显示':'隐藏'}}</td>
                    <td>
                        <span v-if="item.witeType==1">服务协议</span>
                        <span v-if="item.witeType==2">水电协议</span>
                        <span v-if="item.witeType==3">安全协议</span>
                    </td>
                    <td>
                        <button @click="WilUpt(item.id)" class="btn btn-primary">编辑</button>
                        <button @click="WilDel(item.id)" class="btn btn-danger">删除</button>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
    <div>
        当前页数<a style="color: red;">{{quertInfo.pageindex}}</a>条
           共<a style="color: red;">{{data.totalCount}}</a>条
            <span v-for="item in data.totalPage" :key="item" @click="goPage(item)">{{item}}</span>
            
               共<a style="color: red;">{{quertInfo.pageindex}}</a>/<a style="color: red;">{{data.totalCount}}</a>页
           
            <input type="button" value="首页" @click="goPage('a')"/>
            <input type="button" value="上一页" @click="goPage('b')"/>
            <input type="button" value="下一页" @click="goPage('c')"/>
            <input type="button" value="尾页" @click="goPage('d')"/>
    </div>
</template>

<script setup lang="ts">
import {ref, reactive,onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import axios from 'axios';
let router = useRouter()
let route = useRoute()
let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})
let quertInfo:any = reactive({
    pageindex:1,
    pageSize:2,
    WiteTitle:'',
    WiteType:""
})
 onMounted(()=>{
     getWilelist();
 })
 const getWilelist=()=>{
     axios({
         url:"/api/Willtell/GetWiteList",
         method:"get",
         params:quertInfo
     })
     .then((res)=>{
         data.list=res.data.list;
         data.totalCount=res.data.totalCount;
         data.totalPage=res.data.totalPage;
     
     })
 }
 //选中
 let ids=ref([]);
 let checkAll=ref(false);
 const gocheckAll=()=>{
     checkAll.value=!checkAll.value;
     if(checkAll.value)
     {
         ids.value=data.list.map((item:any)=>{
             return item.id
         })
     }
     else
     {
         ids.value=[];
     }
 }
 const checkone=()=>{
     if(ids.value.length==data.list.length)
     {
         checkAll.value=true;
     }
     else
     {
         checkAll.value=false;
     }
 }

 const goPage=(str:any)=>{
    switch(str){
        case 'a':
            quertInfo.pageindex = 1;
            break;
        case 'b':
            quertInfo.pageindex--;
            break;
        case 'c':
            quertInfo.pageindex++;
            break;
        case 'd':
            quertInfo.pageindex = data.totalPage;
            break;
        case str:
            quertInfo.pageindex = str;
            break;
    }
   
    getWilelist();
}




//单删
 const WilDel=(id:any)=>{
     var f=confirm("确定删除吗？");
     if(f){
        axios({
        url:'/api/Willtell/willtellDelete',
        method:'delete',
        params:{
            id:id
        }
     })
     .then((res)=>{
         if(res.data==1){
            alert('删除成功');
            getWilelist();
         }
         else{
            alert('删除失败');
         }
     })
     }
 }
 //批量删除
 const willAllDelete=()=>{
     var f=confirm("确定删除吗？");
     if(f){
         axios({
        url:'/api/Willtell/willtellDeleteAll',
        method:'delete',
        params:{
            ids:ids.value.toString()    
        }
     })
     .then((res)=>{
         if(res.data>0){
             alert('删除成功');
             getWilelist();
         }
         else{
             alert('删除失败');
         }
     })
    }
 }
 const WileExport=()=>{
     location.href=`https://localhost:7163/api/Willtell/GetImportExSxle?pageindex=${quertInfo.pageindex}&pageSize=${quertInfo.pageSize}`;
 }
 const ok=()=>{
     router.push('/WiliteAdd');
 }
//修改
const WilUpt=(id:any)=>{
    router.push({path:'/Wiliteupdate',query:{id:id}})
}
//修改状态
const willAllUpt=(state:any)=>{
    var f=confirm("确定修改吗？");
    if(f){
        axios({
            url:'/api/Willtell/willtellUpdateAll',
            method:'put',
            params:{
                ids:ids.value.toString(),
                
                state:state
            }
        })
        .then((res)=>{
            if(res.data>0){
                alert('修改成功');
                getWilelist();
            }
            else{
                alert('修改失败');
            }
        })
    }
}
</script>

<style scoped>
span{
    margin: 0 10px;
}
input[type="button"]{
margin:10px;
}
</style>